<template>
  <view class="pay">
    <!-- 地址信息栏 -->
    <view class="address-wrap">
      <!-- 收货地址信息 -->
      <view class="address" v-if="address">
        <view class="address-row1">{{ detailAddress }}</view>
        <view class="address-row2">
          <text>{{ address.userName }}</text>
          <text>{{ address.telNumber }}</text>
        </view>
      </view>
      <!-- 收货地址按钮 -->
      <view class="addressButton" v-else>
        <button
          type="warn"
          :plain="true"
          class="address-btn"
          @click="onChooseAddress"
        >
          选择地址
        </button>
      </view>
    </view>
    <!-- 用户勾选了的商品列表 -->
    <view class="selectList">
      <view>已选商品</view>
      <view class="list">
        <view
          class="cart-item"
          v-for="item in checkedCartList"
          :key="item.goods_id"
        >
          <!-- 商品图片 -->
          <view class="cart-img">
            <image mode="widthFix" :src="item.goods_small_logo"></image>
          </view>
          <!-- 商品详情 -->
          <view class="cart-detail">
            <view class="cart-goods-name u-line-2">{{ item.goods_name }}</view>
            <view class="cart-goods-info">
              <view class="goods-price">¥{{ item.goods_price }}</view>
              <view class="goods-num-tool">
                <view class="num-value">X {{ item.nums }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部支付栏 -->
    <view class="cart-tool">
      <!-- 合计 -->
      <view class="all-price">
        合计:
        <text>￥{{ totalPrice }}</text>
      </view>
      <!-- 结算 -->
      <view class="go-pay" @click="onPay">去支付({{ totalNum }})</view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
// import getToken from "@/utils/wxToken";

export default {
  data() {
    return {
      // 收货地址
      address: null,
    };
  },
  methods: {
    async onChooseAddress() {
      const [err, result] = await uni.chooseAddress({});
      console.log(result);
      this.address = result;
    },
    async onPay() {
      if (!this.detailAddress) {
        uni.showToast({
          title: "尚未选择收获地址",
          icon: "none",
        });
        return;
      }
      // 调用utils的wxToken的方法获取token
      // const token = this.$store.state.token;
      // console.log(token);
      // 构造生成订单所需的参数
      const orderParams = {
        order_price: this.totalPrice,
        consignee_addr: this.detailAddress,
        goods: this.checkedCartList.map((item) => ({
          goods_id: item.goods_id,
          goods_number: item.nums,
          goods_price: item.goods_price,
        })),
      };
      // 发送请求，完成订单创建，成功会返回order_number
      const orderRes = await uni.$u.http.post("/my/orders/create", orderParams);
      //   console.log(orderRes);
      const { order_number } = orderRes.message;
      //   获取支付参数
      const payRes = await uni.$u.http.post("/my/orders/req_unifiedorder", {
        order_number,
      });
      //   console.log(payRes);
      const { pay } = payRes.message;
      //   调起微信支付
      uni.requestPayment(pay);
    },
  },
  computed: {
    // 详细收货地址信息
    detailAddress() {
      if (!this.address) return "";
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
    // 通过getters获取用户勾选了的商品数组
    ...mapGetters(["totalPrice", "totalNum", "checkedCartList"]),
  },
};
</script>

<style lang="scss" scoped>
.pay {
  background-color: #f9f9f9;
}
// 地址栏的样式
.address-wrap {
  margin: 20rpx 20rpx 35rpx 20rpx;
  background-color: #fff;
  .address {
    padding: 20rpx;
    .address-row1 {
      font-weight: 700;
    }
    .address-row2 {
      margin-top: 20rpx;
      font-size: 26rpx;
      color: #666;
      text {
        margin-right: 30rpx;
      }
    }
  }
  .addressButton {
    padding: 50rpx 0;
  }
  .address-btn {
    width: 60%;
  }
}

// 用户勾选的商品列表的样式
.selectList {
  background-color: #fff;
  margin: 0 20rpx;
}
.cart-item {
  display: flex;
  .cart-chk {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 80%;
    }
  }

  .cart-detail {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .cart-goods-name {
      font-size: 26rpx;
      color: #666;
    }

    .cart-goods-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .goods-price {
        font-size: 26rpx;
        color: #eb4450;
      }

      .goods-num-tool {
        display: flex;

        .num-value {
          height: 40rpx;
          margin: 0 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          color: #666;
        }
      }
    }
  }
}

// 支付部分样式
.cart-tool {
  border-top: 1rpx solid #ccc;
  padding: 0 20rpx;
  display: flex;
  height: 83rpx;
  align-items: center;
  color: #666;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  .all-price {
    flex: 1;
    font-size: 26rpx;
    text {
      color: #eb4450;
    }
  }

  .go-pay {
    padding: 0 20rpx;
    height: 52rpx;
    background-color: #ea4350;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26rpx;
    font-size: 22rpx;
  }
}
</style>